<template>
	<view class="mp-cashier">
		<basic-nav-bar 
			backgroundColor="transparent"
			:statusBar="true"
			:border="false" 
			:fixed="true"
			:clickLeftBack="false"
			left-icon="arrowleft" 
			title="在线支付"
			@clickLeft="$refs.cancelPopup.open()"/>
		  <view class="order-info">
			  <basic-label-value label="订单编号:" :value="options.orderNo" color="#999999" size="26rpx"/>
				<basic-label-value label="应付金额:" color="#999999" size="26rpx" >
					<basic-price :price="payResultInfo.payMoney" size="36rpx" color="#FF5944" />					
				</basic-label-value>			  
		  </view>
		  <view class="pay-type">
			  <view class="selct-tips">
				  请选择支付方式
			  </view>
			  <view class="row pay-items">
				  <radio-group @change="radioChange">
						<label class="row pay-item">
							<view>微信支付</view>
							<view>
								<radio value="微信支付" class="pay-radio" :checked="true" />
							</view>
						</label>
					</radio-group>
			  </view>			  
		  </view>
		  <bottomBar>
			    <view class="cashier-bottom-bar" >
					<view class="price-detail">
						<view class="label">
							需支付：
						</view>
						<basic-price :price="payResultInfo.payMoney" size="36rpx" color="#FF5944" unitSize="30rpx"  />
					</view>		
					<view class="btn">
						<basic-button  type="primary" height="100%" width="200rpx" size="full" border borderRadius="0" @click="submit" >去支付</basic-button>				
					</view>				
				</view>
		  </bottomBar>

		<!-- 支付返回弹窗提示 -->
    <uni-popup ref="cancelPopup" type="center" >
      <view class="cancel-dialog--wrap">
				<view class="title">订单尚未支付</view> 
				<view class="subtitle">确定放弃支付？</view> 
			
				<basic-button class="bt" type="plain" border @click="confirmCancel" width="280rpx" height="64rpx">放弃支付</basic-button> 
				<basic-button class="bt" @click="$refs.cancelPopup.close()" width="280rpx" height="64rpx">继续支付</basic-button> 
			</view>
    </uni-popup>
	</view>
</template>
<script>
import sdk from 'sdk'
import {decodeQueryObject} from 'utils/helper/query'
import bottomBar from '@/components/business/bottom-bar'
import { doPay, pullPay, getOpenId } from 'api'
export default {
	name: 'mp-cashier',
	components: { bottomBar },
	onLoad(query){
		this.options = decodeQueryObject(query)
		this.pay()
	},
	onShow(){
	},
	data() {
		return {
			options: '',
			payResultInfo: {},
			openId:''
		}
	},
	methods: {
		pay(){
			let that = this
			sdk.showLoading({mask: true})
			// 请求支付接口成功后拉取支付
			doPay(this.options.orderNo).then(payRes => {
				sdk.hideLoading()
				if (payRes && payRes.code === 0) {
					that.payResultInfo = JSON.parse(payRes.result.formContent)  
				} 
			})			
			wx.login({
				success (res) {
					if (res.code) {
						that.getOpenId(res.code)						
					}
				}
			})
		},
		getOpenId(code) {
			getOpenId({code}).then(ret => {
				if(ret.code==0){
					this.openId = ret.result
				}
			})
		},
		submit() {
			const that = this
			sdk.showLoading({mask: true})
			console.log('this.payResultInfo::', this.payResultInfo)
			const params = {
				"clientType": 5,
				"merchantOrderNo": this.payResultInfo.merchantOrderNo,
				"openId": this.openId,
				"payByCash": 0,
				"payType": 2
			}
			pullPay(params).then(res=>{
				sdk.hideLoading()
				const result = JSON.parse(res.result) 
				wx.requestPayment({
					timeStamp: result.timeStamp,
					nonceStr: result.nonceStr,
					package: result.package,
					signType: 'MD5',
					paySign: result.paySign,
					success (successRes) { 
						sdk.redirectTo({
							url: '/packageOrder/pages/booking-result/index?status=1&orderNo='+that.options.orderNo
						})
					},
					fail (failRes) { 
						// that.$refs.cancelPopup.open()
						sdk.redirectTo({
							url: '/packageOrder/pages/booking-result/index?orderNo='+that.options.orderNo
						})
					}
				})
			})
			
		},
		confirmCancel() {
			sdk.redirectTo({
				url: '/packageOrder/pages/booking-result/index?orderNo='+this.options.orderNo
			})
		}
	}
}
</script>
<style lang="less">
.mp-cashier{
	background: #F2F2F2;
	height: 100vh;
	.order-info{
		border-top: 1px solid #EAEAEA;
		background: #fff;
		padding: 30rpx;
	}
	.row{
		display: flex;
		flex-direction: row;
	}
	.pay-type{
	}
	.selct-tips{
		color: #999999;
		font-size: 24rpx;
		margin: 20rpx 30rpx;
	}
	.pay-items{
		background: #fff;
		padding: 30rpx;
		font-size: 30rpx;
		.pay-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 690rpx;
		}
	}
	.pay-radio{
		transform: scale(0.7)
	}
	.cashier-bottom-bar{
		height: 100%;
		width: 100%;
		.price-detail{
			padding-left: 30rpx;
			float: left;
			display: flex;
			.label{
				margin-left: 20rpx;
				color: #272626;
				font-size: 28rpx;
			}
		}
		.btn{
			height: 100%;
			float: right;
		}
	}

	.cancel-dialog--wrap{
		width: 520rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius:16rpx;
		background: #fff;

		padding: 30rpx;
		.image{
			width: 168rpx;
			height: 168rpx;
		}
		.title{			
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1B2431;
			margin-bottom: 20rpx;
		}
		.subtitle{			
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
		.bt{
			margin-top: 20rpx
		}
	}
}
</style>